<template>
	<view class="my">
		<view class="my-top">
			<view class="title-my">会员信息</view>
			<view class="content-nav">
				<view class="content-info">
					<image class="image-style" :src="userinfo.avatar"></image>
					<view class="info-name">{{userinfo.nickname}}</view>
				</view>
			</view>
		</view>
		<view class="my-nav">
			<view class="nav-grjl">
				<view class="nav-top">
					<view class="top-left">
						<view class="line-y"></view>
						<view class="top-title">填写个人信息</view>
					</view>
				</view>
				<view class="nav-bottom">
					<u-form :model="form" ref="uForm">
						<u-form-item label="姓名:" prop="username" label-width="150upx">
							<u-input v-model="form.username" />
						</u-form-item>
						<u-form-item label="手机号码:" label-width="150upx">
							<view>{{phone}}</view>
						</u-form-item>
						<u-form-item label="开户行:" label-width="150upx">
							<u-input v-model="form.sub_branch" />
						</u-form-item>
						<u-form-item label="银行账号:" label-width="150upx">
							<u-input v-model="form.bank_card" />
						</u-form-item>
						<u-form-item label="出生日期:" label-width="150upx">
							<u-input v-model="form.birthday" :disabled="true" />
						</u-form-item>
					</u-form>
					<view class="yhxy">
						<view class="xk" @click.stop="ifxq = !ifxq">
							<u-icon name="checkbox-mark" size="20" v-if="ifxq"></u-icon>
						</view>
						<view style="margin-left: 10upx;text-decoration:underline;" @click="getlookxy">我已同意《用户体现协议》</view>
					</view>
				</view>
				<view class="btn-bottom" @click="getchangebankcark">提交</view>
			</view>
		</view>
		<u-picker v-model="show" mode="time" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ifxq: false,
				show: false,
				phone: '',
				form: {
					username: '',
					bank_card: '',
					sub_branch: '',
					birthday: ''
				},
				userinfo: {},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					intro: [{
						min: 5,
						message: '简介不能少于5个字',
						trigger: 'change'
					}]
				}
			};
		},
		onShow() {
			this.getUserinfo()
		},
		methods: {
			getlookxy () {
				uni.navigateTo({
					url:'/pages/tx/index'
				})
			},
			confirm (e) {
				this.form.birthday = e.year + '-' + e.month + '-' + e.day
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			geTel(tel){
			    var reg = /^(\d{3})\d{4}(\d{4})$/;  
			    return tel.replace(reg, "$1****$2");
			},
			getUserinfo(){
				this.$request('', '/api/apiminiapp/getuserinfo', 'POST', {}, {}).then(res => {
					this.userinfo = res.data
					this.phone = this.geTel(res.data.mobile)
					// this.form.mobile = res.data.mobile
					this.form.username = res.data.nickname
					this.form.sub_branch = res.data.sub_branch
					this.form.bank_card = res.data.bank_card
				})
			},
			getchangebankcark () {
				if (this.ifxq !== true) {
					uni.showToast({
					    title: '必须先同意协议',
						icon: 'error',
					    duration: 2000
					});
					return
				}
				this.$request('', '/api/user/changebankcark', 'POST', this.form, {}).then(res => {
					uni.showToast({
					    title: '提交成功',
						icon: 'succer',
					    duration: 2000
					});
					this.getUserinfo()
				})
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style lang="less">
	.xk {
		width: 30upx;
		height: 30upx;
		border: 1px solid #333333;
		display: flex;
		align-items: center;
	}
	.yhxy {
		display: flex;
		align-items: center;
		margin-top: 30upx;
		margin-bottom: 70upx;
	}
	.btn-bottom {
		width: 85%;
		height: 80upx;
		background: #FDA917;
		box-shadow: 1upx 2upx 7upx 0upx rgba(255, 255, 255, 0.66);
		border-radius: 50upx;
		color: #fff;
		line-height: 80upx;
		text-align: center;
		font-size: 35upx;
		position: relative;
		top: 40upx;
		margin: 0 auto;
	}

	.nav-top {
		display: flex;
		justify-content: space-between;
		padding-top: 30upx;
		padding-left: 30upx;

		.top-left {
			display: flex;
			align-items: center;

			.line-y {
				width: 8upx;
				height: 30upx;
				background-color: #4768F3;
			}

			.top-title {
				color: #7B7B7B;
				font-weight: bold;
				font-size: 32upx;
				margin-left: 20upx;
			}
		}

		.top-right {
			width: 200upx;
			height: 50upx;
			display: flex;
			align-items: center;
			// justify-content: space-around;
			background: linear-gradient(to left, #434EE7 0%, #4987EE 100%);
			border-bottom-left-radius: 50upx;
			border-top-left-radius: 50upx;

			.yhk {
				margin-left: 20upx;
			}

			.top-title-right {
				color: #fff;
				font-size: 25upx;
				letter-spacing: 2upx;
				margin-left: 10upx;
			}
		}
	}

	.nav-bottom {
		width: 100%;
		// display: flex;
		// justify-content: space-around;
		// padding: 50upx
		padding-left: 30upx;
		padding-right: 30upx;
		margin-top: 30upx;

		.bottom-left {
			.money-title {
				text-align: center;
				font-size: 25upx;
				color: #444447;
				font-weight: bold;
			}

			.bottom-money {
				font-size: 50upx;
				font-weight: bold;
				color: #EC1561;
				margin-top: 10upx;
			}
		}

		.bottom-right {
			.money-title {
				text-align: center;
				font-size: 25upx;
				color: #444447;
				font-weight: bold;
			}

			.bottom-money {
				font-size: 50upx;
				font-weight: bold;
				color: #7E7E7E;
				margin-top: 10upx;
			}
		}
	}

	.content-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 45upx;
		padding-left: 40upx;
		padding-right: 40upx;

		.content-info {
			display: flex;
			align-items: center;

			.info-name {
				font-size: 35upx;
				color: #fff;
				margin-left: 20upx;
			}
		}
	}

	.title-my {
		width: 100%;
		text-align: center;
		font-size: 36upx;
		color: #fff;
		padding-top: 30upx;
	}

	.my {
		width: 100%;
		height: 100vh;
		background-color: #eee;

		.my-top {
			width: 100%;
			height: 350upx;
			background-image: url('../../static/top-img.png');
			background-size: 100% 100%;
		}

		.image-style {
			width: 138upx;
			height: 138upx;
			background: #4768F3;
			border: 2px solid #FFFFFF;
			border-radius: 50%;
		}
	}

	.my-nav {
		width: 100%;

		// height: 100%;
		.nav-grjl {
			// height: 350upx;
			width: 93%;
			background-color: #fff;
			margin: 0 auto;
			border-radius: 10upx;
			position: relative;
			bottom: 40upx;
			box-shadow: 0px 9px 24px 0px rgba(10, 13, 47, 0.05);
		}

		.nav-grjl-two {
			height: 350upx;
			width: 93%;
			background-color: #fff;
			margin: 0 auto;
			border-radius: 10upx;
			position: relative;
			margin-top: 60upx;
			box-shadow: 0px 9px 24px 0px rgba(10, 13, 47, 0.05);
			// bottom: 40upx;
		}

		.nav-back-gg {
			width: 95%;
			margin: 0 auto;
			margin-top: 80upx;
		}
	}
</style>
